<template>
  <div class="myCollect">
    <div class="myCollectBox">
      <div class="title">
        <h4>
          收藏的院校
          <span v-show="data.collegeList.length">({{data.collegeList.length}})</span>
        </h4>
      </div>
      <div class="box">
        <el-tag
          @click="toCollect('college')"
          class="tagToCollect"
          v-if="!data.collegeList.length">+ 收藏</el-tag>
        <el-tag
          v-for="(tag,index) in data.collegeList"
          :key="tag.id"
          closable
          @close="delTag(tag,index,'college')">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
    <div class="myCollectBox">
      <div class="title">
        <h4>
          收藏的专业
          <span v-show="data.majorList.length">({{data.majorList.length}})</span>
        </h4>
      </div>
      <div class="box">
        <el-tag
          @click="toCollect('major')"
          class="tagToCollect"
          v-if="!data.majorList.length">+ 收藏</el-tag>
        <el-tag
          v-for="(tag,index) in data.majorList"
          :key="tag.id"
          closable
          @close="delTag(tag,index,'major')">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
    <div class="myCollectBox">
      <div class="title">
        <h4>
          收藏的职业
          <span v-show="data.careerList.length">({{data.careerList.length}})</span>
        </h4>
      </div>
      <div class="box">
        <el-tag
          @click="toCollect('career')"
          class="tagToCollect"
          v-if="!data.careerList.length">+ 收藏</el-tag>
        <el-tag
          v-for="(tag,index) in data.careerList"
          :key="tag.id"
          closable
          @close="delTag(tag,index,'career')">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "myCollect",
        data() {
            return {
                data: {
                    collegeList: [
                        {'id': 1, 'name': '暨南大学', code: '20221'},
                        {'id': 2, 'name': '北京大学', code: '20365'},
                        {'id': 3, 'name': '山东大学', code: '20458'},
                    ],
                    majorList: [],
                    careerList: []
                }
            }
        },
        created() {

        },
        methods: {
            // 点击去收藏
            toCollect(name) {
                alert('去收藏：'+name)
            },
            // 点击删除收藏
            delTag(tag,index,type) {
                console.log(tag,index,type);
                if(type==='college') {
                    this.data.collegeList.splice(index,1)
                }else if(type==='major'){
                    this.data.majorList.splice(index,1)
                }else{
                    this.data.careerList.splice(index,1)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .myCollectBox{
    .title{
      padding: 6px 10px;
      h4{
        font-weight: normal;
        font-size: 0.9rem;
        span{
          color: #666;
          font-size: 0.7rem;
        }
      }
    }
    .box{
      padding: 10px;
      .el-tag{
        margin-right: 8px;
        margin-bottom: 4px;
      }
      .tagToCollect{
        cursor: pointer;
      }
      .tagToCollect:hover{
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>